<template>
	<view>

		<view class="detail-title">
			<view class="detail-title-text " style="margin-left: 20rpx;" :class="orderStatus>0?'detail-title-text1':''">
				付款 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text detail-title-text1" :class="orderStatus>1?'detail-title-text1':''">
				选人<i class="iconfont icon">&#xe604;</i>
			</view>

			<view class="detail-title-text" :class="orderStatus>3?'detail-title-text1':''">
				出发 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>4?'detail-title-text1':''">
				到达 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>5?'detail-title-text1':''">
				服务 <i class="iconfont icon">&#xe604;</i>
			</view>
			<view class="detail-title-text" :class="orderStatus>6?'detail-title-text1':''">
				完成
			</view>

			<view class="detail-title-text-1" v-if="orderStatus>=3&&orderInfo.daren_distance">
				相距{{orderInfo.daren_distance}}km
			</view>
		</view>

		<!-- 已付款 -->
		<view class="detail-talent" v-if="orderStatus==2" @click="$emit('clickParent',orderInfo)">
			<view>
				已有<span class="detail-talent-text">{{orderInfo.userList.length}}位</span>达人抢单
			</view>
			<view class="detail-talent-right">
				<view class="detail-talent-right-photo" v-for="(item,index) in orderInfo.userList" :key="index">
					<image class="image" :src="item.avator" mode=""></image>
				</view>
				<i class="iconfont icon">&#xe604;</i>
			</view>
		</view>
		<!-- #ifndef APP -->
		<view v-if="orderStatus>=3" class="map_con">
			<map class="map" ref="map" id="map" :markers="[{id:1,width: 22,
					height: 22,latitude:orderInfo.daren_lat,longitude:orderInfo.daren_lng,iconPath:'/static/start.png'},{id:2,width: 22,
					height: 22,latitude:orderInfo.lat,longitude:orderInfo.lng,iconPath:'/static/end.png'}]"
				:longitude="orderInfo.daren_lng" :latitude="orderInfo.daren_lat" scale="11"></map>
		</view>
		<!-- #endif -->
		<view class="detail-con1" :style="orderStatus==4?'margin-top: -40rpx;z-index: 1;position: relative;':''">
			<view class="detail-con1-1">
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/order-icon-0.svg" mode=""></image>
					<span>{{orderInfo.title}}</span>
				</view>
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/biao.svg" mode=""></image>
					<span>{{orderInfo.time_text}}</span>
				</view>
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode=""></image>
					<span>{{orderInfo.address}}</span>
				</view>
				<view class="con1-item" v-if="orderInfo.type == 0">
					<image src="https://pw.qyang.cc/static/svg/order-icon-3.svg" mode=""></image>
					<span>{{orderInfo.level_title}}</span>
				</view>
				<!-- <view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/order-icon-3.svg" mode=""></image> 不指定区域
				</view> -->
			</view>
			<view class="detail-con1-2">
				{{orderInfo.notes?orderInfo.notes:'无'}}
			</view>
		</view>

		<view class="detail-con2"
			v-if="!(orderStatus === 1 || orderStatus === 2 || orderStatus === 0 || orderStatus === -1)">
			<view class="detail-con2-item" @click="goPage('/subpages/talent/talent?id='+orderInfo.daren_id)">
				<view>达人</view>
				<view class="detail-con2-right">
					<image class="image" src="https://pw.qyang.cc/static/avator1.png" mode=""></image>
					{{orderInfo.daren_nickname}}
					<i class="iconfont icon">&#xe604;</i>
				</view>
			</view>
		</view>

			<view class="detail-con2" v-if="orderInfo.status>=6" @click="showLog">
			<view class="detail-con2-item">
				<view>核销完成记录</view>
				<view class="detail-con2-right">
					查看
					<i class="iconfont icon">&#xe604;</i>
				</view>
			</view>
		</view>

		<view class="detail-con2">
			<view class="detail-con2-item">
				<view>服务费</view>
				<view>￥{{orderInfo.price}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人路费</view>
				<view>￥{{orderInfo.address_price}}</view>
			</view>
			<view class="detail-con2-item">
				<view>优惠券</view>
				<view>-￥{{orderInfo.pre_price}}</view>
			</view>
			<view class="detail-con2-item">
				<view>合计</view>
				<view>￥{{orderInfo.total_price}}</view>
			</view>
		</view>


		<view class="detail-con2">
			<view class="detail-con2-item">
				<view>订单编号</view>
				<view>{{orderInfo.order_no}}</view>
			</view>
			<view class="detail-con2-item">
				<view>下单时间</view>
				<view>{{orderInfo.createDate}}</view>
			</view>
			<view class="detail-con2-item">
				<view>支付时间</view>
				<view>{{orderInfo.createDate}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人选择</view>
				<view>{{orderInfo.status2Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人出发</view>
				<view>{{orderInfo.status3Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>达人到达</view>
				<view>{{orderInfo.status4Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>订单核销</view>
				<view>{{orderInfo.status5Date}}</view>
			</view>
			<view class="detail-con2-item">
				<view>订单完成</view>
				<view>{{orderInfo.status6Date}}</view>
			</view>
		</view>

		<u-popup :show="showTalent" :round="10" mode="bottom" closeable @close="showTalent=false"
			@open="showTalent=true">
			<view class="pop-content-detail">
				<view class="content-title">
					选择达人
				</view>
				<view class="content-detail">
					<view class="content-list" v-for="(item,index) in orderInfo.userList"
						@click="selectTalent(index,item.daren_id)">
						<view class="content-list-top">
							<view class="content-list-top-1">
								<view class="left">
									<image src="https://pw.qyang.cc/static/avator1.png" mode=""></image>
								</view>
								<view class="middle">
									<view class="l1"> {{item.nickname}}
										<image src="https://pw.qyang.cc/static/svg/icon-realname.svg"
											style="width: 30rpx;height: 30rpx;margin: 0 20rpx;">
										</image>
										<view class="l1-sex1" v-if="item.gender == 1">
											<image src="https://pw.qyang.cc/static/sexW.png"
												style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
											</image>{{item.age}}
										</view>
										<view class="l1-sex2" v-if="item.gender == 0">
											<image src="https://pw.qyang.cc/static/sexM.png"
												style="width: 20rpx;height: 20rpx; margin-right: 10rpx;">
											</image>{{item.age}}
										</view>
									</view>
									<view class="l2">
										{{item.cm}}cm&nbsp;&nbsp;{{item.kg}}kg
									</view>
								</view>
							</view>
							<view class="right">
								<image class="btn-img1" v-if="selectedItem==index"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
							</view>
						</view>
						<view class="content-list-bottom">
							<view style="display: flex;align-items: center;">
								<i class="iconfont" style="font-style: normal;">&#xe610;</i>{{item.juli}}km
							</view>
							<view> {{item.createDate}}</view>
							<view> 路费<span class="money">{{item.addressPrice}}元</span></view>
						</view>

					</view>
				</view>

				<view class="content-bottom">
					<view class="content-bottom-btn" @click="chooseConfirm">
						确认选择
					</view>

				</view>
			</view>
		</u-popup>
		<u-popup :show="isShowLog" :round="10" mode="bottom" closeable @close="isShowLog=false"
			@open="isShowLog=true">
			<view class="pop-content-detail">
				<view class="content-title">
					核销记录
				</view>
				<view class="content-detail">
					<writeoffrecords :orderId="orderInfo.id"></writeoffrecords>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "orderDetail",
		props: {
			orderId: {
				type: [Number, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
				required: true, // 可以根据实际需求设置是否为必传属性
			},
			orderInfo: {
				type: [Object, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
				required: true, // 可以根据实际需求设置是否为必传属性
				default: {}
			},
			orderStatus: {
				type: [Number, String], // 根据实际情况确定id的数据类型，这里假设是数字或者字符串类型
				required: true, // 可以根据实际需求设置是否为必传属性
			}
		},
		data() {
			return {
				markers: [{
					id: 1,
					width: 22,
					height: 22,
					iconPath: '/static/start.png'
				}, {
					id: 2,
					width: 22,
					height: 22,
					iconPath: '/static/end.png'
				}],
				selectedItem: '',
				showTalent: false,
				userList: [],
				isShowLog:false,
			};
		},
		mounted() {
			this.markers[0].latitude = this.orderInfo.daren_lat
			this.markers[0].longitude = this.orderInfo.daren_lng
			this.markers[1].latitude = this.orderInfo.lat
			this.markers[1].longitude = this.orderInfo.lng
		},
		methods: {
			chooseTalent() {
				console.log(this.orderInfo)
				this.$parent.chooseTalent(this.orderInfo)
				// this.showTalent = true
			},
			chooseConfirm() {
				var that = this
				this.showTalent = false
				this.rq.getData('order/chooseDaren', {
					order_id: this,
					orderId,
					daren_id: this.chooseDarenId
				}).then(res => {
					uni.showToast({
						title: "达人选择成功",
						duration: 2000
					})
					setTimeout(function() {
						uni.reLaunch({
							url: '/subpages/myOrder/myOrder'
						})
					}, 2000)
				})
			},
			showLog(){
				this.isShowLog = true
			},
			selectTalent(index, daren_id) {
				this.selectedItem = index;
				this.chooseDarenId = daren_id;
			},
			gohexiao() {
				uni.navigateTo({
					url: '/pages/workbench/writeoffrecords'
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail-talent {
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 13px;
		letter-spacing: 0px;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		height: 80rpx;
		padding: 0 20rpx;

		.detail-talent-text {
			/* 10位 */
			color: #FF5866
		}

		.detail-talent-right {
			display: flex;
			align-items: center;

			.detail-talent-right-photo {
				display: flex;
				align-items: center;

				.image {
					width: 18px;
					height: 18px;
				}

				.icon {
					font-style: normal;
				}
			}


		}
	}

	.detail-con1 {
		width: 345px;
		opacity: 1;
		background: #FFFFFF;
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 12px;
		letter-spacing: 0px;
		color: #333333;
		margin: 20rpx auto;
		padding: 20rpx;

		.detail-con1-1 {
			width: 315px;
			border-radius: 8px;
			opacity: 1;
			background: #FFF6F9;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 12px;
			letter-spacing: 0px;
			color: #333333;
			padding: 20rpx;
			margin: 20rpx auto;

			image {
				width: 12px;
				height: 12px;
				margin-right: 20rpx;
			}

			.con1-item {
				height: 40rpx;

				display: flex;
				align-items: center;

				span {

					width: 600rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
					/* 使用省略号表示被截断的文本 */
				}
			}

		}

		.detail-con1-2 {
			width: 315px;
			line-height: 40rpx;
			border-radius: 8px;
			opacity: 1;
			background: rgba(255, 224, 164, 0.25);
			padding: 20rpx;
			margin: 20rpx auto;
		}
	}

	.detail-con2 {
		width: 345px;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 28px;
		letter-spacing: 0px;
		color: #212121;
		margin: 20rpx auto;
		padding: 20rpx;

		.detail-con2-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 5rpx 10rpx;

			.detail-con2-right {
				display: flex;
				align-items: center;
				font-family: 阿里巴巴普惠体;
				font-size: 13px;
				font-weight: normal;
				line-height: 28px;
				letter-spacing: 0px;
				color: #666666;

				.image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}

				.icon {
					font-style: normal;
				}
			}
		}


	}

	.detail-title {
		width: 100%;
		height: 88rpx;
		opacity: 1;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;

		.detail-title-text-1 {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 28rpx;
			letter-spacing: 0px;
			margin-left: auto;
			color: #333333;
			// margin: 0 20rpx;
		}

		.detail-title-text1 {
			color: #FF7681 !important;
		}

		.detail-title-text {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 28rpx;
			color: #999999;
			display: flex;
			align-items: center;

			.icon {
				font-style: normal;
				// margin: 0 10rpx;
			}
		}
	}

	.pop-content-detail {
		width: 100%;
		height: 80vh;
		overflow-y: scroll;
		padding: 36rpx 0 60rpx 0;
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		background-color: #F7F7F7;

		.content-title {
			text-align: center;
		}

		.content-bottom {
			position: fixed;
			bottom: 0;
			width: 100%;

			.content-bottom-btn {
				width: 351px;
				height: 74rpx;
				border-radius: 102px;
				opacity: 1;
				background: #FF5866;
				border: 1px solid #FF5866;
				margin: 10rpx auto;
				font-family: PingFang SC;
				font-size: 15px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}


		}

		.content-detail {
			padding: 40rpx 0;

			.content-list {
				width: 345px;
				opacity: 1;
				background: #FFFFFF;
				margin: 20rpx auto;
				padding: 20rpx;

				.content-list-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.content-list-top-1 {
						display: flex;
						align-items: center;

						.left {
							position: relative;
							margin-left: -30rpx;
							margin-top: -40rpx;
							margin-right: 20rpx;

							image {
								width: 156rpx;
								height: 148rpx;
								border-radius: 5px;
							}
						}

						.middle {
							.l1 {
								font-family: PingFang SC;
								font-size: 18px;
								font-weight: 600;
								line-height: 18px;
								letter-spacing: 1px;
								color: #272B2D;
								display: flex;
								margin-bottom: 20rpx;

								.l1-sex1 {
									display: flex;
									width: 42px;
									height: 16px;
									border-radius: 88px;
									opacity: 1;
									background: rgba(116, 220, 254, 0.2);

									font-size: 11px;
									font-weight: 500;
									line-height: 15px;
									display: flex;
									align-items: center;
									justify-content: center;
									letter-spacing: 0px;
									color: #2BC1F1;

								}

								.l1-sex2 {
									display: flex;
									width: 42px;
									height: 16px;
									border-radius: 88px;
									opacity: 1;

									background: rgba(253, 168, 175, 0.2);

									font-size: 11px;
									font-weight: 500;
									line-height: 15px;
									display: flex;
									align-items: center;
									justify-content: center;
									letter-spacing: 0px;
									color: #FDA8AF;

								}
							}

							.l2 {
								font-family: 阿里巴巴普惠体 2.0;
								font-size: 12px;
								font-weight: normal;
								line-height: 12px;
								letter-spacing: 0px;

								color: #999999;
							}
						}
					}


					.right {
						.btn-img1 {
							width: 20px;
							height: 20px;
						}
					}

				}

				.content-list-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 12px;
					font-weight: normal;
					line-height: 12px;
					letter-spacing: 0px;
					color: #999999;
					padding: 20rpx;

					.money {
						color: #FF5866;
					}
				}

			}
		}
	}
	.map_con{
		width: 750rpx;
		height: 464rpx;
		overflow: hidden;
	}
	.map {
		width: 750rpx;
		height: 464rpx;
		/* #ifndef APP */
		margin-bottom: -67rpx;
		/* #endif */
		/* #ifdef APP */
		margin-bottom: 20rpx;
		/* #endif */
	}
</style>